<template>
    <div>
        <el-dialog title="编辑" :visible.sync="info.isShow" @close="reset">
            <el-form :model="form" :rules="rules" ref="roleadd">
                <el-form-item label="账号" prop="phone" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickname">
                    <el-input v-model="form.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
                    <el-input v-model="form.password" placeholder="请输入您的密码" autocomplete="off"></el-input>
                </el-form-item>


                <el-form-item label="角色状态" :label-width="formLabelWidth" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="2">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="reset">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
import { mapActions, mapState } from "vuex"
export default {
    props: ["info"],
    computed: {
        ...mapState("member", ["memberlist","membertotal"]),
    },
    methods: {
        ...mapActions("member", ["getmemberlist","getmembertotal"]),
        reset() {
            this.info.isShow = false
            this.form = { nickname: "", password: "", status: "", phone: "", uid:""}
        },
        submit() {
            this.$refs.roleadd.validate(value => {
                // console.log( this.form);

                // return
                if (value) {
                    // console.log(this.form);
                    // return
                    this.$Api.memberedit(this.form).then(res => {

                        // console.log(res, 12123456645);
                        // 如果成功关闭dialog页面，重新渲染页面，提示信息
                        if (res.code == 200) {
                            this.$message.success(res.msg)
                            // 重新调用这个页面
                            this.getmemberlist();
                            // 调用reset取消函数
                            this.reset()
                        }
                    })
                    // return
                } else {
                    // console.log(11);
                }
            })
        },


        refesh(obj){
            // console.log(obj);
            this.form = {
                ...obj
            }
        }
    },
    data() {
        return {
            form: {
                nickname: "",
                phone: "",
                password: "",
                status: "",
                uid:0,
                id:0
            },
            rules: {
                nickname: { required: true, message: "请输入角色昵称", trigger: "blur" },
                status: { required: true, message: "请选择状态", trigger: "blur" },
                phone: { required: true, message: "请输入账号", trigger: "blur" }
            },
            formLabelWidth: '120px',
        }
    },
    mounted() {
        this.getmemberlist()
    }
}

</script>


<style leng='less' scoped>

</style>